<!DOCTYPE html>
<head>
	<meta charset="UTF-8">
	<title>地图下钻</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta http-equiv="Access-Control-Allow-Origin" content="*">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="icon" href="favicon.ico">
	<link rel="stylesheet" href="../../assets/css/main.css">
</head>
<body>
	<div id="app">
		<div style="background: rgba(0, 0, 0, 0.2);height:900px">
			<div id="map" style="height:888px"></div>

			<!-- <a href="http://view.officeapps.live.com/op/view.aspx?src=http%3a%2f%2fqdsh.com%2ffile%2fppt.pptx">浏览文档[ppt]</a>
			<a href="http://view.officeapps.live.com/op/view.aspx?src=http%3a%2f%2fqdsh.com%2ffile%2fword.docx">浏览文档[word]</a>
			<a href="http://view.officeapps.live.com/op/view.aspx?src=http%3a%2f%2fqdsh.com%2ffile%2fexcel.xlsx">浏览文档[excel]</a>
			<a href="http://view.officeapps.live.com/op/view.aspx?src=http%3a%2f%2fqdsh.com%2ffile%2fpdf.pdf">浏览文档[pdf]</a>
			<!-- <a href="http://view.officeapps.live.com/op/view.aspx?src=http%3a%2f%2fvideo.ch9.ms%2fbuild%2f2011%2fslides%2fTOOL-532T_Sutter.pptx">test</a> -->
		</div>
	</div>
	<script type="text/javascript" src="../../assets/cityMap/cityMap.js "></script>
	<script type="text/javascript" src="../../assets/cityMap/provinces.js "></script>
	<script type="text/javascript" src="../../js/libs/jquery.min.js "></script>
	<script type="text/javascript" src="../../js/libs/layui/layui.js"></script>
	<script type="text/javascript" src="../../js/libs/vue/vue.js"></script>
	<script type="text/javascript" src="../../js/libs/vue/axios.min.js"></script>
	<script type="text/javascript" src="../../js/main.js"></script>
	<script type="text/javascript" src="../../js/utils.js"></script>
	<script type="text/javascript" src="../../js/libs/echarts/echarts.min.js"></script>
	<script type="text/javascript" src="../../js/libs/echarts/echarts-gl.min.js"></script>
	<script>
		//全局数据
		var G = {
			mapBathUrl: "./map/", // 获取数据接口
			china: "./map/china.json"
		};
		var cityMap = getCityMap();
		var provinces = getProvinces();
		console.log(cityMap);
		console.log(provinces);
		new Vue({
			el: '#app',
			data() {
				return {
					mapOfIndustry: {
						backgroundColor: '#14285b',
						title: {
							text: '地图下钻',
							subtext: '',
							top: '30',
							left: 'center',
							textStyle: {
								color: '#fff'
							},
							subtextStyle: {
								color: '#ccc',
								fontSize: 13,
								fontWeight: 'normal',
								fontFamily: 'Microsoft YaHei'
							}
						},
						tooltip: {
							trigger: 'item',
							formatter: '{b}',
							formatter: function(params) {
								// console.log(params)
								return params.seriesName + '<br/>' + params.name + ' : ' + params.value
							}
						},
						//左侧小导航图标
						visualMap: {
							left: 'right',
							min: 0,
							max: 800,
							inRange: {
								color: ['#33a26f', '#22d885', '#22d849', '#23ec0b', '#57ec0b']
							},
							text: ['High', 'Low'], // 文本，默认为数值文本
							calculable: true
						},
						series: [{
							name: '',
							type: 'map',
							mapType: 'china',
							itemStyle: {
								normal: {
									label: {
										show: false
									}
								},
								emphasis: {
									label: {
										show: true
									}
								}
							},
							data: [{
									name: '辽宁',
									value: 1555
								},
								{
									name: '黑龙江',
									value: 1555
								},
								{
									name: '吉林',
									value: 1555
								}
							]
						}],
						animationDuration: 1000,
						animationEasing: 'cubicOut',
						animationDurationUpdate: 1000
					},
					coData: [{
							name: '北京',
							value: "123"
						},
						{
							name: '天津',
							value: "3422"
						},
						{
							name: '上海',
							value: "23423"
						},
						{
							name: '重庆',
							value: "234"
						},
						{
							name: '河北',
							value: "33"
						},
						{
							name: '河南',
							value: "44"
						},
						{
							name: '云南',
							value: "322"
						},
						{
							name: '辽宁',
							value: "324"
						},
						{
							name: '黑龙江',
							value: "777"
						},
						{
							name: '湖南',
							value: "44"
						},
						{
							name: '安徽',
							value: "5345"
						},
						{
							name: '山东',
							value: "456"
						},
						{
							name: '新疆',
							value: "4532"
						},
						{
							name: '江苏',
							value: "456"
						},
						{
							name: '浙江',
							value: "145"
						},
						{
							name: '江西',
							value: "782"
						},
						{
							name: '湖北',
							value: "213"
						},
						{
							name: '广西',
							value: "452"
						},
						{
							name: '甘肃',
							value: "885"
						},
						{
							name: '山西',
							value: "148"
						},
						{
							name: '内蒙古',
							value: "356"
						},
						{
							name: '陕西',
							value: "975"
						},
						{
							name: '吉林',
							value: "964"
						},
						{
							name: '福建',
							value: "55"
						},
						{
							name: '贵州',
							value: "5452"
						},
						{
							name: '广东',
							value: "456"
						},
						{
							name: '青海',
							value: "45"
						},
						{
							name: '西藏',
							value: "12"
						},
						{
							name: '四川',
							value: "73"
						},
						{
							name: '宁夏',
							value: "745"
						},
						{
							name: '海南',
							value: "752"
						},
						{
							name: '台湾',
							value: "7865"
						},
						{
							name: '香港',
							value: "789"
						},
						{
							name: '澳门',
							value: "456"
						}
					],
					dataProvince: [{
							value: 204,
							name: "沈阳市"
						},
						{
							value: 355,
							name: "大连市"
						},
						{
							value: 488,
							name: "鞍山市"
						},
						{
							value: 523,
							name: "抚顺市"
						},
						{
							value: 204,
							name: "本溪市"
						},
						{
							value: 355,
							name: "丹东市"
						},
						{
							value: 488,
							name: "锦州市"
						},
						{
							value: 523,
							name: "营口市"
						},
						{
							value: 204,
							name: "阜新市"
						},
						{
							value: 355,
							name: "辽阳市"
						},
						{
							value: 488,
							name: "盘锦市"
						},
						{
							value: 523,
							name: "铁岭市"
						},
						{
							value: 204,
							name: "朝阳市"
						},
						{
							value: 355,
							name: "葫芦岛市"
						}
					],
					dataCity: [{
							value: 204,
							name: "西岗区"
						},
						{
							value: 355,
							name: "中山区"
						},
						{
							value: 488,
							name: "长海县"
						},
						{
							value: 523,
							name: "甘井子区"
						},
						{
							value: 204,
							name: "瓦房店市"
						},
						{
							value: 355,
							name: "普兰店市"
						},
						{
							value: 488,
							name: "庄河市"
						},
						{
							value: 523,
							name: "旅顺口区"
						},
						{
							value: 204,
							name: "沙河口区"
						},
						{
							value: 355,
							name: "金州区"
						}
					],
				}
			},
			mounted() {
				this.mapCH()
			},
			methods: {
				/**
				 * 地图下钻
				 */
				mapCH() {
					var a = this.coData
					var b = this.dataProvince
					var c = this.dataCity
					let that = this;
					var mapChart = echarts.init(document.getElementById('map'), 'dark')
					var geoCoordMap = {
						'江西公司': [117.121225, 36.66466],

						'大连公司': [121.03, 38.7],

					}
					var dataX = [{
							name: '江西公司',
							value: 190
						},

						{
							name: '大连公司',
							value: 158
						},

					];
					//直辖市和特别行政区-只有二级地图，没有三级地图
					var special = ['北京', '天津', '上海', '重庆', '香港', '澳门']
					var mapdata = []
					var mappointdata = []
					//绘制全国地图
					axios.get(G.china).then(res => {
						console.log(res)
						var data = res.data
						var d = []
						for (var i = 0; i < data.features.length; i++) {
							d.push({
								name: data.features[i].properties.name,
							})
						}
						var point = [];
						for (var i = 0; i < dataX.length; i++) {
							var geoCoord = geoCoordMap[dataX[i].name];
							if (geoCoord) {
								point.push({
									name: dataX[i].name,
									value: geoCoord
								});
							}
						}
						mappointdata = point
						mapdata = d
						var coData = this.coData
						//注册地图
						echarts.registerMap('china', data)
						//绘制地图
						that.renderMap('china', d, mappointdata, a)
					}).catch(err => {
						console.log("错误1：------------------------")
						console.log(err)
					})
					//地图点击事件
					mapChart.on('click', function(params) {
						if (params.name in provinces) {
							//如果点击的是34个省、市、自治区，绘制选中地区的二级地图
							axios.get(G.mapBathUrl + '/provinces/' + provinces[params.name] + '.json').then(res => {
								console.log("获取省代号id")
								var codeId = provinces[params.name]
								console.log(codeId)
								var data = res.data
								var d = []
								for (var i = 0; i < data.features.length; i++) {
									// var geoCoord = geoCoordMap[data[i].name];
									d.push({
										name: data.features[i].properties.name,
										value: data.features[i].properties.value,
									});
								}
								echarts.registerMap(params.name, data)
								that.renderMap(params.name, d, mappointdata, b)
							}).catch(err => {
								console.log("错误2：------------------------")
								console.log('map', err)
							})
						} else if (params.seriesName in provinces) {
							//如果是【直辖市/特别行政区】只有二级下钻
							if (special.indexOf(params.seriesName) >= 0) {
								// renderMap('china', mapdata)
								// renderMap('china', mapdata)
								//绘制全国地图
								axios.get(G.china).then(res => {
									var data = res.data
									var d = []
									for (var i = 0; i < data.features.length; i++) {
										d.push({
											name: data.features[i].properties.name,
										})
									}

									var point = [];
									for (var i = 0; i < dataX.length; i++) {
										var geoCoord = geoCoordMap[dataX[i].name];
										if (geoCoord) {
											point.push({
												name: dataX[i].name,
												value: geoCoord
											});
										}
									}
									mappointdata = point
									mapdata = d
									//注册地图
									echarts.registerMap('china', data)
									//绘制地图
									that.renderMap('china', d, mappointdata, a)
								}).catch(err => {
									console.log("错误4：------------------------")
									console.log(err)
								})
							} else {
								//显示县级地图
								axios.get(G.mapBathUrl + '/city/' + cityMap[params.name] + '.json').then(res => {
									console.log("获取市代号id")
									console.log(cityMap[params.name])
									var data = res.data
									console.log("地图点击事件")
									console.log(data)
									echarts.registerMap(params.name, data)
									var d = []
									for (var i = 0; i < data.features.length; i++) {
										d.push({
											name: data.features[i].properties.name,
											value: data.features[i].properties.value
										})

									}
									that.renderMap(params.name, d, mappointdata, c)
								}).catch(err => {
									console.log("错误3：------------------------")
									console.log('map', err)
								})
							}
						} else {
							// renderMap('china', mapdata)
							//绘制全国地图
							axios.get(G.china).then(res => {
								var data = res.data
								var d = []
								for (var i = 0; i < data.features.length; i++) {
									d.push({
										name: data.features[i].properties.name,
									})
								}

								var point = [];
								for (var i = 0; i < dataX.length; i++) {
									var geoCoord = geoCoordMap[dataX[i].name];
									if (geoCoord) {
										point.push({
											name: dataX[i].name,
											value: geoCoord
										});
									}
								}
								mappointdata = point
								mapdata = d
								//注册地图
								echarts.registerMap('china', data)
								//绘制地图
								that.renderMap('china', d, mappointdata, a)
							}).catch(err => {
								console.log("错误4：------------------------")
								console.log(err)
							})
						}
				 })
				},
				/**
				 * 地图dom渲染
				 * @param map
				 * @param data
				 * @param mappointdata
				 */
				renderMap(map, data, mappointdata, dataColor) {
					console.log("传值")
					console.log(dataColor)

					var geoCoordMap = {
						'江西公司': [117.121225, 36.66466],

						'大连公司': [121.03, 38.7],

					}
					var dataX = [{
							name: '江西公司',
							value: 190
						},

						{
							name: '大连公司',
							value: 158
						},

					];
					var convertData = function(dataX) {
						var res = [];
						for (var i = 0; i < dataX.length; i++) {
							var geoCoord = geoCoordMap[dataX[i].name];
							if (geoCoord) {
								res.push({
									name: dataX[i].name,
									value: geoCoord
								});
							}
						}
						return res;
					};
					let mapOfIndustryecharts = echarts.init(document.getElementById('map'))
					this.mapOfIndustry.title.subtext = map
					this.mapOfIndustry.animationDuration = 1000,
						this.mapOfIndustry.animationEasing = 'cubicOut'
					this.mapOfIndustry.animationDurationUpdate = 1000
					this.mapOfIndustry.geo = {
						name: '强',
						type: 'scatter',
						map: map,
						zoom: 1.25,
						layoutCenter: ['50%', '50%'], //距左百分比，距上百分比
						layoutSize: 400, //省份地图大小为600xp。
						label: {
							emphasis: {
								show: false
							}
						},
						itemStyle: {
							normal: {
								areaColor: '#323c48',
								borderColor: '#111'
							},
							emphasis: {
								areaColor: '#2a333d'
							}
						}
					}
					this.mapOfIndustry.series = [
						/*{
            name: map,
            type: 'scatter',
            coordinateSystem: 'geo',
            aspectScale: 0.75, //长宽比
            data: convertData(dataX),
            layoutCenter: ['40%', '40%'],
// 如果宽高比大于 1 则宽度为 100，如果小于 1 则高度为 100，保证了不超过 100x100 的区域
            layoutSize: 80,
            label: {
              normal: {
                formatter: '{b}',
                position: 'right',
                show: false,
                textStyle: {
                  color: '#ffffff'
                }
              },
              emphasis: {
                show: false
              }
            },
            itemStyle: {
              normal: {
                color: 'red'
              }
            }
          },*/

						{
							name: map,
							type: 'map',
							mapType: map,
							geoIndex: 1,
							aspectScale: 0.75, //长宽比
							zoom: 1.25,
							layoutCenter: ['50%', '50%'], //距左百分比，距上百分比
							layoutSize: 400, //省份地图大小为600xp。
							// coordinateSystem: 'geo',

							label: {
								normal: {
									formatter: '{b}',
									position: 'right',
									show: true,
									textStyle: {
										color: '#ffffff'
									}
								},
								emphasis: {
									show: true
								}
							},
							// roam: true,
							itemStyle: {
								normal: {
									color: '#F4E925',
									areaColor: '#323c48',
									borderColor: 'dodgerblue'
								}
							},
							data: dataColor

						},
					]
					if (map == '黑龙江') {
						this.mapOfIndustry.geo.zoom = 1.25
						this.mapOfIndustry.series[0].zoom = 1.25
					} else if (map == '甘肃') {
						this.mapOfIndustry.geo.zoom = 1.25
						this.mapOfIndustry.series[0].zoom = 1.25
					} else if (map == 'china') {
						this.mapOfIndustry.geo.zoom = 1.25
						this.mapOfIndustry.series[0].zoom = 1.25
					} else {
						this.mapOfIndustry.geo.zoom = 1
						this.mapOfIndustry.series[0].zoom = 1
					}
					//渲染地图
					mapOfIndustryecharts.setOption(this.mapOfIndustry)
				}
			}
		})
	</script>
	<style scoped>
	</style>
</body>
</html>
